HttpClient 模块

概述

在现代 Web 应用中，与服务器进行数据交互是非常常见的任务。Angular 提供了 HttpClient 模块，使得发送 HTTP 请求和处理响应变得简单和高效。本教程将详细介绍如何使用 Angular 的 HttpClient 模块，包括发送请求、处理响应、使用拦截器、错误处理等。

1. 引入 HttpClientModule

在使用 HttpClient 之前，首先需要在 Angular 应用中引入 HttpClientModule。这个模块通常在根模块（AppModule）中导入。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // 引入 HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 创建服务并注入 HttpClient

为了更好地组织代码，通常会将 HTTP 请求封装在一个服务中。下面是一个简单的服务示例，展示了如何注入 HttpClient 并发送 GET 请求。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  getUsers(): Observable<any> {
    return this.http.get('https://jsonplaceholder.typicode.com/users');
  }
}

在这个示例中，DataService 通过构造函数注入了 HttpClient，并定义了一个 getUsers 方法来发送 GET 请求。

3. 在组件中使用服务

接下来，我们可以在组件中使用 DataService 来获取数据，并将其显示在模板中。

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `
})
export class AppComponent implements OnInit {
  users: any[] = [];

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.dataService.getUsers().subscribe(data => {
      this.users = data;
    });
  }
}

在这个组件中，我们通过 ngOnInit 生命周期钩子调用 DataService 的 getUsers 方法，并将获取到的用户数据赋值给 users 属性。模板中使用 *ngFor 指令来遍历 users 数组并显示每个用户的名字。

4. 处理响应

HttpClient 返回的 Observable 可以被订阅，并在数据到达时执行相应的操作。通常，我们会使用 .subscribe 方法来处理响应。

this.dataService.getUsers().subscribe(
  (data) => {
    console.log('Success:', data);
    this.users = data;
  },
  (error) => {
    console.error('Error:', error);
  }
);

在这个示例中，我们处理了成功和错误两种情况。成功时，数据会被赋值给 users 属性；错误时，会在控制台输出错误信息。

5. 发送 POST 请求

除了 GET 请求，HttpClient 还支持其他 HTTP 方法，如 POST、PUT、DELETE 等。下面是一个发送 POST 请求的示例。

addUser(user: any): Observable<any> {
  return this.http.post('https://jsonplaceholder.typicode.com/users', user);
}

在组件中调用这个方法：

this.dataService.addUser({ name: 'New User' }).subscribe(
  (response) => {
    console.log('User added:', response);
  },
  (error) => {
    console.error('Error adding user:', error);
  }
);

6. 使用拦截器

拦截器是 HttpClient 的一个强大功能，允许你在请求发送之前或响应返回之后对其进行处理。例如，你可以在请求头中添加认证信息，或者在响应中处理错误。

首先，创建一个拦截器：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authToken = 'your-auth-token';
    const authReq = req.clone({
      headers: req.headers.set('Authorization', `Bearer ${authToken}`)
    });
    return next.handle(authReq);
  }
}

然后，在 AppModule 中注册拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule { }

7. 错误处理

在实际应用中，错误处理是非常重要的。你可以通过拦截器或直接在服务中处理错误。

this.dataService.getUsers().subscribe(
  (data) => {
    console.log('Success:', data);
    this.users = data;
  },
  (error) => {
    console.error('Error:', error);
    // 处理错误，例如显示错误消息
  }
);

8. 实践练习

练习 1: 获取并显示用户列表

1. 创建一个新的 Angular 项目。
2. 在 AppModule 中引入 HttpClientModule。
3. 创建一个 DataService，并在其中定义一个 getUsers 方法来获取用户数据。
4. 在 AppComponent 中使用 DataService 获取用户数据，并将其显示在模板中。

练习 2: 添加用户

1. 在 DataService 中定义一个 addUser 方法，用于发送 POST 请求添加新用户。
2. 在 AppComponent 中调用 addUser 方法，并处理成功和错误情况。

练习 3: 创建并使用拦截器

1. 创建一个拦截器，在请求头中添加认证信息。
2. 在 AppModule 中注册拦截器。
3. 验证拦截器是否生效，例如通过检查请求头中的 Authorization 字段。

总结

通过本教程，你已经学会了如何在 Angular 中使用 HttpClient 模块进行 HTTP 请求和响应处理。你了解了如何引入 HttpClientModule、创建服务、发送请求、处理响应、使用拦截器以及进行错误处理。希望这些知识能够帮助你在实际项目中更好地与服务器进行数据交互。